<template>
    <div>
        <Row class="topMenu">
            <Col span="8">
                <h2 class="topMenu_logo">Sengled <i>运营平台</i></h2>
            </Col>
            <Col span="14" offset="2">
                <div class="topMenu_right">
                    <dl class="topMenu_user">
                        <dt><img src="../../../static/img/user.jpg" alt=""></dt>
                        <dd>
                            <h6> xxx@sengled.com</h6>
                            <p> [ROLE_REGION_ALL]</p>
                        </dd>
                    </dl>
                    <dl class="topMenu_logout">
                        <dt><em></em></dt>
                        <dt><Icon type="log-out" size="30" class="lout" @click.native="logout"></Icon></dt>
                    </dl>
                </div>
            </Col>
        </Row>
    </div>
</template>
<style scoped>
    .topMenu{height: 60px;background-color: #014f91;overflow: hidden;}
    .topMenu_logo{font-size: 35px;color: #fff;padding-left: 20px;font-weight: 100;}
    .topMenu_logo>i{font-size: 16px;}
    .topMenu_right{overflow:hidden;float: right;margin-right: 20px;margin-top: 6px;}
    .topMenu_right dl{display: inline-block}
    .topMenu_user dt,.topMenu_user dd{height:100%;display: inline-block;}
    .topMenu_user dt{margin-right: 6px;}
    .topMenu_user dt img{width: 36px;height:36px;border-radius:5px;background-size: 100% auto;margin-top: 5px;}
    .topMenu_user dd{color:#fff;}
    .topMenu_user dd h6{font-size: 14px;line-height:24px;}
    .topMenu_user dd p{font-size: 12px;}
    .topMenu_logout{color: #fff;margin-left: 10px;}
    .topMenu_logout dt,.topMenu_logout dd{height:100%;display: inline-block}
    .topMenu_logout dt em{display: inline-block;width: 2px;height: 24px;background-color:#4a7ca9;margin-right: 10px;}
    .lout{color: #0085f4}
</style>